<template>
	<view class="pages">
		<view class="form">
			<view class="form_item">
				<view>{{$t('withdrawals.withdrawals.Address')}}</view>
				<view style="position: relative;left: -30rpx;">
					<input type="text" :placeholder="$t('withdrawals.withdrawals.pAddress')" v-model="form.address">
					<view class="address" v-show="addressShow">
						<view v-for="item in walletList" :key="item.id" @click="walletClick(item)">{{item.address}}</view>
					</view>
				</view>
				<uni-icons :type="addressShow?'top':'bottom'" @click="addressShow=!addressShow"></uni-icons>
			</view>
			<view class="form_item">
				<view>{{$t('withdrawals.withdrawals.Money')}}</view>
				<input type="number" :placeholder="$t('withdrawals.withdrawals.pMoney')" v-model="form.price">
			</view>
			<!-- <view class="form_item">
				<view>安全密码</view>
				<input type="password" placeholder="请输入您的安全密码">
			</view> -->
		</view>
		<view class="btn" @click="userWithdrawal">{{$t('withdrawals.withdrawals.Sure')}}</view>
	</view>
</template>

<script>
	import { userWallet, userWithdrawal } from '@/api/api.js'
	export default {
		data() {
			return {
				form: {},
				addressShow: false,
				walletList: []
			};
		},
		onShow() {
			userWallet({
				token: uni.getStorageSync('token')
			}).then(res=>{
				this.walletList = res.data.data
				if(this.walletList.length>0){
					this.form.address = this.walletList[0].address
					this.form.id = this.walletList[0].id
				}else{
					uni.showToast({
						title: this.$t('otherAdd.address'),
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/wallet/index'
						})
					}, 600)
				}
			}),
			uni.setNavigationBarTitle({
				title: this.$t('list.Tixian')
			})
		},
		methods: {
			walletClick(item){
				this.form.address = item.address
				this.addressShow = false
				this.form.id = item.id
			},
			userWithdrawal(){
				userWithdrawal({
					token: uni.getStorageSync('token'),
					wallet_id: this.form.id,
					price: this.form.price
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/withdrawals/withdrawalsList'
						})
					}, 600)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-placeholder{
		color: #ddd;
		font-size: 28rpx;
	}
	.form {
		width: 96%;
		margin: 0 auto;
		font-size: 28rpx;

		.form_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			border-bottom: #ddd 1px solid;
			padding: 0 10px;
			position: relative;

			&>input {
				flex-grow: 1;
				margin-left: 20px;
				height: 50px;
				color: grey;
			}

			.address {
				position: absolute;
				top: 30px;
				left: -10px;
				right: -50px;
				background-color: #ddd;
				z-index: 10;

				&>view {
					height: 40px;
					line-height: 40px;
					padding-left: 5px;
					border-bottom: #fff 1px solid;
				}
			}
		}
	}
	.btn{
		position: absolute;
		bottom: 150px;
		left: 10%;
		right: 10%;
		background-color: #00C2C2;
		color: #fff;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
	}
</style>